<template>
  <v-chart :ref="refs"
           :theme="tdTheme"
           @click="onClick"
           :autoresize="true"
           :options="polar" />
</template>

<script>
import 'echarts'
import ECharts from 'vue-echarts'
import tdTheme from './theme.json'
export default {
  name: 'Ebar',
  components: {
    'v-chart': ECharts
  },
  props: {
    // bottom: {
    //   type: Number,
    //   default: 70
    // },
    // rotate: {
    //   type: Number,
    //   default: 50
    // },
    // value: {
    //   type: Array,
    //   default () {
    //     return []
    //   }
    // },
    xAxisData: {
      type: Array,
      default () {
        return []
      }
    },
    seriesData: {
      type: Array,
      default () {
        return []
      }
    },
    refs: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    subText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tdTheme: tdTheme,
      polar: {}
    }
  },
  methods: {
    init () {
      // let xAxisData = []
      // let seriesData = []
      // console.log(this.value)

      // this.value.map(item => {
      //   xAxisData.push(item.name)
      //   seriesData.push(item.value)
      // })
      const { xAxisData, seriesData } = this
      const option = {
        title: {
          top: 10,
          bottom: 10,
          left: '10%',
          text: this.text,
          subtext: this.subText
        },
        legend: {
          top: 20,
          bottom: 20,
          right: '10%'
        },
        grid: {
          top: 70,
          bottom: this.bottom,
          left: '10%',
          right: '10%'
        },
        tooltip: {},
        xAxis: {
          axisLabel: { rotate: this.rotate, interval: 0 },
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: seriesData,
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              if (params.value > 0) {
                return params.value
              } else {
                return ''
              }
            }
          }
        }]
      }
      this.polar = option
    },
    onClick (event, instance, echarts) {
      this.$emit('chartClick', arguments)
      console.log(event, instance, echarts)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>
